<template>
<div class="progress-bar" :style="{width: width+'px'}">
  <div class="bar" :style="{width: value+'%',background:color,}">
    <span class="full-width text-ellipsis">{{msg || ''}}
      <q-tooltip>{{msg || ''}}</q-tooltip>
    </span>
  </div>
</div>
</template>

<script>
export default {
  name: 'progress-bar',
  props: {
    value: {
      type: Number || String,
      default: 0
    },
    width: {
      // type: Number || String,
      default: 150
    },
    color: {
      type: String
    },
    // 显示刻度
    msg: {
      type: String
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="stylus">
.progress-bar{
  height 14px
  background-color #D3D3D3
  border-radius 4px
  overflow hidden
  .bar{
    height 100%
    line-height 100%
    text-align center
    transition width linear 300ms
    border-radius 4px
  }
}
</style>
